<template>
 <div class="center">
    <div class="center-form">
          <el-form inline label-width="100px" @submit.native.prevent>
            <el-form-item label="订购号">
              <el-input v-model="listParsem.subscriptionNo" placeholder="请输入订购号" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="用户UID">
              <el-input v-model="listParsem.userId" placeholder="请输入用户UID" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="产品名称">
              <el-input v-model="listParsem.productName" placeholder="请输入产品名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="商户名称">
              <el-input v-model="listParsem.merchantName" placeholder="请输入商户名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="订购状态">
                <el-select v-model="listParsem.subscriptionStatus" placeholder="请选择订购状态">
                  <el-option
                    v-for="item in orderStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label=" ">
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="initGetList"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" type="primary" @click="resetList"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="center-table">
            <el-table
          :data="tableList"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          :header-cell-style="tableHeaderColor"
        >
        <el-table-column
            prop="subscriptionNo"
            label="订购号"
            align="center"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="status"
            label="订购状态"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <p> {{ funStatus(scope.row.subscriptionStatus) }} </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="userId"
            label="用户UID"
            align="center"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="productName"
            label="产品名称"
            align="center"
            width="240"
          ></el-table-column>
          <el-table-column
            prop="productNo"
            label="产品编号"
            align="center"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="merchantName"
            label="商户名称"
            align="center"
            width="240"
          />
          <el-table-column
            prop="surrenderChannel"
            label="解约方式"
            align="center"
            width="120"
          />
          <el-table-column
            prop="merchantName"
            label="订购来源"
            align="center"
            width="120"
          >
          <template slot-scope="scope">
            <p> 插件订购 </p>
          </template>
          </el-table-column>

          <el-table-column
            prop="activeDate"
            label="创建时间"
            align="center"
            width="150"
          />
          <el-table-column
            prop="surrenderTime"
            label="解约时间"
            align="center"
            width="150"
          />
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
                <el-button
                v-if="scope.row.subscriptionStatus == 'NORMAL' "
                type="text"
                @click="termination(scope.row,scope.$index)"
                >解约</el-button>
              <el-button
                type="text"
                @click="checkInfo(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
       <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="sizechange"
          :page-size="listParsem.size"
          :current-page.sync="listParsem.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
    </div>
 </div>
 <el-dialog
         title="订购详情"
         :visible.sync="finishInfoVisible"
         width="1000px"
         top="10vh"
         >
         <div >
            <el-form :model="finishForm" inline label-width="100px" >
                <el-form-item label="用户UID:" >
                  <p style="width:190px;"> {{ finishForm.userId }} </p>
                </el-form-item>
                <el-form-item label="用户昵称:" >
                  <p style="width:190px;"> {{ finishForm.productName }} </p>
                </el-form-item>
                <el-form-item label="产品编号:" >
                  <p style="width:190px;"> {{ finishForm.productNo }} </p>
                </el-form-item>
                <el-form-item label="商品名称:" >
                  <p style="width:190px;"> {{ finishForm.merchantName }} </p>
                </el-form-item>
                <el-form-item label="商户名称:" >
                  <p style="width:190px;"> {{ finishForm.productName }} </p>
                </el-form-item>
                <el-form-item label="状态:" >
                  <p style="width:190px;"> {{ funStatus(finishForm.subscriptionStatus) }} </p>
                </el-form-item>
                <el-form-item label="订购类型:" >
                    <p style="width:190px;"> 月卡 </p>
                </el-form-item>
                <el-form-item label="订购来源:" >
                    <p style="width:190px;"> 自有插件 </p>
                </el-form-item>
            </el-form>
            <el-table
          :data="finishForm.finishTableList"
          tooltip-effect="dark"
          style="width: 100%"
          height="500px"
          stripe
          :header-cell-style="tableHeaderColor"
        >
        <el-table-column
            prop="period"
            label="期数(次数)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="deductionAmount"
            label="扣款金额"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="deductionDate"
            label="计划扣款时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="status"
            label="订单状态"
            align="center"
           >
            <template slot-scope="scope">
               <p> {{ funFinishStatus(scope.row.status) }} </p>
            </template>
          </el-table-column>
        </el-table>
         </div>
       </el-dialog>
  
 </div>
</template>
<script>
import { subscriptionSurrender , subscriptionPage } from '@/api/fetchApi'
export default {
    data(){
        return{
            listParsem:{ page:1,size:10  },
            total:0,
            tableList:[],
            orderStatusList:[{label:'全部',value:''},{label:'订购中',value:'SUBSCRIBING'},{label:'订购完成',value:'NORMAL'} ,{label:'已暂停',value:'PAUSED'},{label:'已解约',value:'SURRENDER'},{label:'已完结',value:'END'},{label:'超时取消',value:'CANCEL'},{label:'违约取消',value:'DEFAULT_CANCEL'}],
            finishInfoVisible:false,
            finishForm:{finishTableList:[]},
            
        }
    },
    mounted(){
       this.initGetList()  
    },
    methods:{
     async initGetList(){
        const res = await subscriptionPage(this.listParsem)
        this.tableList = res.data
        this.total = res.pageInfo.recordCount
      },
     async termination(v,index){
        const confirm = await  this.$confirm('当前是否确定解约?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        if(confirm){
           const  data = {
            subscriptionCancelType: v.status == 'DEFAULT_CANCEL' ? 'DEFAULT' :'NORMAL',
            subscriptionNo:v.subscriptionNo
            }
            const res = await subscriptionSurrender(data)
            if(res.result_code == 'SUCCESS'){
              this.$message.success('成功解约！');
              this.tableList[index].subscriptionStatus = 'SURRENDER'
            }else{
              this.$message.error(res.return_msg);
            }

        }
      },
      checkInfo(v){
         this.finishForm = v
         if(this.finishForm.deductionPlanList){
          this.finishForm.finishTableList = JSON.parse(v.deductionPlanList)
         }else{
          this.finishForm.finishTableList = []
         }
         console.log(this.finishForm)
         this.finishInfoVisible = true
      },
      handleCurrentChange(val) {
          this.listParsem.page = val;
          this.initGetList()
      },
      sizechange(val) {
          this.listParsem.size = val;
          this.initGetList()
      },
     
      resetList(){
        this.listParsem = {page:1,size:10}
        this.initGetList()
      },
      funFinishStatus(v){
        const list = [ {label:'已暂停',value:'PAUSED'} , {label:'下单中',value:'ORDERING'} , {label:'下单成功',value:'ORDERED'} , {label:'支付成功',value:'PAID'} , {label:'扣款失败',value:'PAY_FAILED'} , {label:'已全额退款',value:'REFUNDED'} , {label:'未生成订单',value:'UNCREATED'} , {label:'已取消',value:'CANCEL'}]
        const data = list.find(item=> item.value == v)
        return data.label
      },
      funStatus(v){
        const list = [ {label:'订购中',value:'SUBSCRIBING'},{label:'订购完成',value:'NORMAL'} ,{label:'已暂停',value:'PAUSED'},{label:'已解约',value:'SURRENDER'},{label:'已完结',value:'END'},{label:'超时取消',value:'CANCEL'},{label:'违约取消',value:'DEFAULT_CANCEL'}]
        const data = list.find(item=>item.value == v) 
        if(data){
          return data.label
        }
      },
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
            return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
          }
       }
    }
}

</script>
<style scoped>
.center{
    width: 100%;
    height: calc(100% - 30px);
    background-color: #fff;
    padding-top: 30px;
}
.center-form{
  padding: 0 22px;
}

.center-table{
    margin-top: 30px;
    padding: 0 20px;
}
</style>
